<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
	<head>
		<meta charset="UTF-8">
		<title>添加用户</title>
		<link rel="stylesheet" type="text/css" href="/webapp/css/easyui.css">
	    <link rel="stylesheet" type="text/css" href="/webapp/css/icon.css">
        <link rel="stylesheet" type="text/css" href="/webapp/css/color.css">
        <link rel="stylesheet" type="text/css" href="/webapp/css/public.css">
	    <script type="text/javascript" src="/webapp/js/lib/jquery.min.js"></script>
	    <script type="text/javascript" src="/webapp/js/lib/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="/webapp/js/lib/jquery.global.settings.js"></script>
	    <script type="text/javascript" src="/webapp/js/lib/ajaxfileupload.js"></script>
	    <script type="text/javascript" src="/webapp/js/common/config.js"></script>
	</head>
	<body>
		<div class="easyui-container-fluid">
			<div class="easyui-panel" style="border: none;">
                <div id="nav" class="nav"></div>
                <div class="easyui-panel" style="border:none;">
                       <form id="ff" class="easyui-form" method="post" >
                              <div style="margin-bottom:20px">
                                  <label class="item-label"><span class="item-required">*</span>用户名：</label>
                                  <input class="easyui-textbox" name="username" style="width:174px" data-options="required:true">
                              </div>
                              <div style="margin-bottom:20px">
                                  <label class="item-label">密码：</label>
                                  <input class="easyui-passwordbox" name="password" style="width:174px;" data-options="">
                              </div>
                              <div style="margin-bottom:20px">
                                  <label class="item-label"><span class="item-required">*</span>部门：</label>
                                  <select class="easyui-combobox" data-options="panelHeight:'auto',required:true" required="required" name="department"  style="width:174px;">
                                      <option value="管理部" selected>管理部</option>
                                      <option value="渠道部">渠道部</option>
                                      <option value="产品部">产品部</option>
                                      <option value="销售部">销售部</option>
                                  </select>
                              </div>
                              <div style="margin-bottom:20px">
                                  <label class="item-label"><span class="item-required">*</span>角色：</label>
                                  <input type="text" id="rolesId" class="easyui-combobox" style="width:174px;" name="roles" data-options="required:true" />
                              </div>
                               <div style="margin-bottom:20px">
                                   <label class="item-label"><span class="item-required">*</span>所管品类：</label>
                                   <input type="text" id="categories" class="easyui-combobox" style="width:174px;" name="categories" data-options="required:true,multiple:true" />
                               </div>
                               <div style="margin-bottom:20px">
                                   <label class="item-label">电话：</label>
                                   <input class="easyui-textbox" name="mobile" style="width:174px;">
                               </div>
                           <div style="margin-bottom:20px">
                                   <label class="item-label">code：</label>
                                   <input class="easyui-textbox" name="code" style="width:174px;">
                               </div>
                       </form>
                       <div style="margin-bottom: 20px;margin-left: 100px;">
                              <a href="javascript:void(0)" class="easyui-linkbutton c8" onclick="submitForm()" style="width:80px">保存</a>
                              <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">取消</a>
                       </div>
                </div>
              </div>
        </div>
	</body>
       <script type="text/javascript">
           var id = getQueryParameter("id");
           var roles = {};
           function submitForm(){
             $('#ff').form('submit',{
                onSubmit:function(){
                   var valid = $(this).form('enableValidation').form('validate');
                   if(valid){
                       var data = getFormData(document.getElementById("ff"));
                       var categories = data.categories;
                       if(!Array.isArray(categories)){
                           data.categories = [categories];
                       }
                       var role_tmp = data.roles;
                       var isarr = Array.isArray(role_tmp);
                       if(!isarr){
                           role_tmp = [role_tmp];
                       }
                       var userRole = [];
                       $(role_tmp).map(function (index,item) {
                          var tmp = item;
                          //item = roles[tmp];
                          userRole.push(roles[item]);
                       });
                       data.roles = userRole;
                       var method = "POST",url="/user/add";
                       if(id){
                           method = "PATCH";
                           url = "/user/update";
                           data.id = id;
                       }
                       data.categories = data.categories.filter(function(item){return item != "";});
                       console.log(data);
                       $.ajax({
                            url:config.url+url,
                            type:method,
                            data:JSON.stringify(data),
                            dataType:'json',
                            contentType:'application/json;charset=UTF-8',
                            beforeSend:function(){
                                $.messager.progress({
                                    title:"请稍等",
                                    interval:50,
                                    text:"操作进行中..."
                                });
                            },
                            complete:function(){
                                $.messager.progress("close");
                            },
                            xhrFields:{withCredentials:true},
                            success:function(data){
                                 if(data.code==200){
                                        $.messager.alert("提示","操作成功.","info",function () {
                                            window.parent.closeCurrentTab();
                                            // window.location.href="/webapp/pages/system/user/list.html";
                                        });
                                 }
                            },
                            error:function(data){
                                 console.log(data);
                            }
                       });
                   }
                   return false;
                }
             });

           }
           function clearForm(){
               window.parent.closeCurrentTab();
                 // window.location.href="/webapp/pages/system/user/list.html";
           }
           $(function () {
             setNav();
             if(id){
                 $.when(condition(),initCategorySelect("categories")).done(function () {
                    $.ajax({
                       url:config.url+"/user",
                       type:'get',
                       data:{id:id},
                       xhrFields:{withCredentials:true},
                       success:function (data) {
                           if(data){
                               var item = data.content[0];
                               if(!item.roles){
                                   item.roles = [{code:""}];
                               }
                               if(!item.categoryManageList){
                                   item.categories = [{code:""}];
                               }else{
                                   item.categories = item.categoryManageList;
                               }
                               $("#ff").form("load",item);
                           }
                       },
                       error:function (XMLHttpRequest,textStatus,errorThrown) {

                       } 
                    }); 
                 });
             }else{
                 condition();
                 initCategorySelect("categories",null,function () {
                     $("#categories").combobox("select","");
                 });
             }
             function condition(){
                 var dtd = $.Deferred();
                 $.ajax({
                     url:config.url+"/role/getAll",
                     type:'get',
                     xhrFields:{withCredentials:true},
                     success:function(data){
                         if(data){
                             data = data.map(function(item,index){
                                 roles[item.id] = item;
                                 return {name:item.name,id:item.id};
                             });
                             data.unshift({"name":"-请选择-","id":""});
                             $("#rolesId").combobox({
                                 "multiple":true,
                                 "textField":"name",
                                 "valueField":"id",
                                 "panelHeight":"150",
                                 "data":data
                             });
                             $("#rolesId").combobox("select","");
                             dtd.resolve();
                         }
                     },
                     error:function(XMLHttpRequest,textStatus,errorThrown){
                         dtd.reject();
                     }
                 });
                 return dtd.promise();
             }

           });
       </script>
</html>